import AirEcharts from "./components/AirEcharts";
import AQILevels from "./components/AQILevels";
import Temperature from "./components/Temperature";
import WaveEcharts from "./components/WaveEcharts";
import titleicon from "./images/titleicon.png";
const titleText = {
  fontSize: "14px",
  letterSpacing: "0.5em", // 增加字符间距
  color: "#eff4ff",
  background: "#0f1c3c",
  fontWeight: "normal",
  marginTop: "10px",
  marginBottom: "10px",
  opacity: 0.8, // 略微降低不透明度使其看起来更柔和
};

const styledNumber = {
  fontFamily: "YouSheBiaoTiHei" /* 选择一个基本的字体家族 */,
  fontSize: "36px" /* 设置字体大小 */,
  fontWeight: "bold" /* 设置为粗体 */,
  textAlign: "center" /* 文本居中 */,
  color: "transparent" /* 文本颜色设为透明，因为我们将使用背景渐变来显示颜色 */,
  backgroundClip: "text" /* 将背景裁剪为文本形状（标准） */,
  backgroundImage: "linear-gradient(to right, #00ff00, #0000ff)",
};
const realTitle = {
  fontSize: "16px",
  color: "#eff4ff",
};
function EchartsLeft({ airData }) {
  const { temp, humi } = airData;
  const levels = [
    { text: "一级：AQI≤50优级", active: true },
    { text: "二级：AQI≤100良好", active: false },
    { text: "三级：AQI≤150轻度污染", active: false },
    { text: "四级：AQI≤200中度污染", active: false },
    { text: "五级：AQI≤300重度污染", active: false },
    { text: "六级：AQI>300严重污染", active: false },
  ];
  return (
    <>
      <div style={realTitle}>
        <img
          src={titleicon}
          alt=""
          style={{ width: "12px", height: "12px", marginRight: "10px" }}
        />
        实时监测 <span style={{ fontSize: "10px" }}>REAL-TIME MONITORING</span>
      </div>
      <div style={titleText}> 温度</div>
      <Temperature temp={temp} />
      <div style={titleText}> 空气湿度</div>
      <div style={styledNumber}>{humi}%</div>
      <WaveEcharts humi={humi} />
      <div style={titleText}> 空气质量指数(AQI):25</div>
      <AirEcharts temp={temp} />
      <div style={{display:"flex",marginTop:"20px"}}>
        <div
          style={{
            width: "4px",
            height: "67px",
            backgroundColor: "#1b79ff",
          }}
        ></div>
        <div>
          {levels.map((level, index) => (
            <AQILevels
              key={index}
              levelText={level.text}
              active={level.active}
            />
          ))}
        </div>
      </div>
    </>
  );
}
export default EchartsLeft;
